<template>
  <el-drawer v-model="drawer" title="分配用户" :with-header="false" size="50%">
    <el-table
      :data="adminRole"
      style="width: 100%"
      height="250"
      size="small"
    >
      <el-table-column prop="id" label="编号" width="80" fixed />
      <el-table-column prop="nickname" label="昵称" width="130" />
      <el-table-column prop="username" label="账号" width="130" />
      <el-table-column prop="name" label="角色" width="120" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
            scope.row.status === 0 ? '禁用' : '正常'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="cancel(scope.row.id)"
            ><el-icon><CircleClose /></el-icon>取消授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="adminList"
      style="width: 100%"
      height="250"
      size="small"
    >
      <el-table-column prop="id" label="编号" width="80" fixed />
      <el-table-column prop="nickname" label="昵称" width="130" />
      <el-table-column prop="username" label="账号" width="130" />
      <el-table-column prop="name" label="角色" width="120" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
            scope.row.status === 0 ? '禁用' : '正常'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="authorization(scope.row.id,scope.row.username)"
            ><el-icon><CircleClose /></el-icon>授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script setup>
import { ElNotification } from 'element-plus';
import { ref } from 'vue'
import request from '@/util/request';

const drawer = ref(false)
const adminList = ref([])
const adminRole = ref([])
const roleId = ref()

const emit = defineEmits(['flush'])

const authorization = (userId,username)=>{
  console.log('用户id',userId,roleId.value,username);
  let obj = adminRole.value.find(item=>item.username===username)

  console.log(obj&&obj!=null);
  if(obj&&obj!=null){
    console.log('执行了');
    ElNotification.warning("当前用户拥有该角色")
    return;
  }
  request.get(`/admin/role/authorization?userId=${userId}&roleId=${roleId.value}`).then((res) => {
      if(res.data === false){
        ElNotification.error('授权失败')
      }else{
        ElNotification.success('授权成功')
      }
      drawer.value = false
      emit('flush')
  })
  .catch(err =>{
  if (err.response) {
    console.error(err.message)
    ElNotification({
      title: 'Error',
      message: err.message,
      type: 'error'
    })
    } else {
    ElNotification({
      title: 'Error',
      message: '网络错误',
      type: 'error'
    })
   }
  })
}


const cancel = (id)=>{
  console.log(id);
  request.get(`/admin/role/cancel-authorization?userId=${id}`).then((res) => {
      if(res.data === false){
        ElNotification.error('取消授权失败')
      }else{
        ElNotification.success('取消授权成功')
      }
      drawer.value = false
      emit('flush')
  })
  .catch(err =>{
  if (err.response) {
    console.error(err.message)
    ElNotification({
      title: 'Error',
      message: err.message,
      type: 'error'
    })
    } else {
    ElNotification({
      title: 'Error',
      message: '网络错误',
      type: 'error'
    })
   }
  })
}

const open = (item, arr,id) => {
  adminList.value = item
  adminRole.value = arr
  roleId.value = id
  drawer.value = true
}

defineExpose({
  open
})
</script>
